<template>
  <div>
    <dingbu :name="nametwo"></dingbu>
    <van-form @submit="onSubmit" ref="copyForm">
      <van-field
        v-model="username"
        name="username"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[
          { required: true, message: '请填写手机号' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
        ]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="请输入密码"
        :rules="[
          { required: true, message: '请填写密码' },
          { validator: (e) => /^\w{6,12}$/.test(e), message: '密码格式错误' },
        ]"
      />
      <van-field
        v-model="vercode"
        clearable
        label="验证码"
        name="vercode"
        placeholder="请输入短信验证码"
        :rules="[
          { required: true, message: '请填写验证码' },
          { pattern: /^\d{6}$/, message: '验证码错误' },
        ]"
      >
        <template #button>
          <van-button
            size="small"
            type="primary"
            @click="send"
            native-type="button"
            :disabled="btnDisabled"
            >{{ code_text }}</van-button
          >
        </template>
      </van-field>

      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          :color="basecolor"
          :loading="submitLoding"
          >注册</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import dingbu from "../components/dingbu.vue";
import { copy, sendSms } from "@/api/user.js";

export default {
  components: {
    dingbu,
  },
  data() {
    return {
      username: "",
      password: "",
      vercode: "",
      mobile: "",
      type: "",
      nametwo: "注册",
      btnDisabled: false,
      code_text: "发送验证码",
      submitLoding: false,
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      this.submitLoding = true;
      
        copy(values)
        .then(res=>{
          console.log(res)
        }).finally(e=>{
      this.submitLoding = true;
          
        })
      },
    //发送验证码
    send() {
      let timer = null;
      let djs = 60;

      // 通过 ref 可以获取到 Form 实例并调 validate 方法 验证表单 传入 name 来验证单个或部分表单项
      this.$refs.copyForm
        .validate("username")
        // .then((res) => {
        //   console.log(res);
        // })
        // .catch((err) => {
        //   console.log(err);
        // })
        //调用 验证码接口
        .then((res) => {
          //禁言按钮
          this.btnDisabled = true;

          //改变按钮内容
          return sendSms({
            mobile: this.username,
            type: "register",
          })
            .then((res) => {
              console.log(res);
              //判断是否发生成功 并提示
              if (res.code == 0) {
                this.$toast(`验证码已发送`);
                timer = setInterval((e) => {
                  djs--;
                  this.code_text = `${djs}s后再次发送`;
                  if (djs <= 0) {
                    clearInterval(timer);
                    djs = 60;
                    this.code_text = "再次发送";
                    //恢复按钮
                    this.btnDisabled = false;
                  }
                }, 1000);
              } else {
                this.$toast(res.msg);
                //恢复按钮
                this.btnDisabled = false;
                //改变按钮内容
                this.code_text = "再次发送";
              }
            })
            .catch((err) => {
              this.$toast(res.msg || "网络波动,发送失败");
              //恢复按钮
              this.btnDisabled = false;
              //改变按钮内容
              this.code_text = "再次发送";
            });
        });
    },
  }
};
</script>

<style>
</style>